import React from 'react'
import Footer from '../component/Footer'
import '../css/dll/playcar.scss'
import 'animate.css'

import { useNavigate } from 'react-router-dom'
import { Swiper, Toast, Badge } from 'antd-mobile'
import { SearchOutline, MailOutline } from 'antd-mobile-icons'

export default function PlayCar() {
	const navigate = useNavigate()
	
	return (

		<div >
			{/* 标头 */}
			<div
				style={{
					width: '100%',
					height: '100rem',
					color: '#fff',
					position: 'absolute',
					backgroundImage: 'url(../img/bei.png)',
					backgroundSize: '100% 100%',
				}}>
				<div className='dll_car_img'>
					<img src="../img/logo.png" alt=""
						style={{
							width: '95px',
							height: '29px',
							margin: '10px 10px',
							display: 'inline-block',
							float: 'left',
						}} />
					{/* <SearchOutline className='dll_car_span' fontSize={20} /> */}
					<img style={{
						position: 'absolute',
						left: '8rem',
						top: '0.4rem',
						margin: '10px 10px',
						display: 'inline-block',
						float: 'left'
					}} src="../img/sou.png" alt="" />

					<input type="text" placeholder="发现更多精彩吧！"
						className='dll_car_input' />

					<Badge content={Badge.dot} style={{
						'--right': '-2.8rem',
						'--top': '-0.7rem',
					}}>
						<MailOutline style={{
							top: '-1rem',
							left: '0.5rem',
							position: 'absolute',
							width: '50px',
							height: '28px',
						}} onClick={() => {
							navigate('/home/message')
						}} />
					</Badge>

				</div>
				{/* 轮播图页 */}
				<div className='dll_car_lun'>
					<Swiper autoplay loop
						style={{
							"--track-padding": "0 0 0", //指示器与轮播区域分离
							autoplayInterval: 1800, //轮播间隔时间
						}}
						indicatorProps={{
							style: {
								"--active-dot-color": "black", //当前元素圆点颜色
								"--dot-border-radius": "50%",  //元素圆点圆角值
								"--active-dot-border-radius": "7px",  //当前元素圆点的圆角值 
								"--active-dot-size": "8px",  //元素圆点的大小
								"--dot-size": "8px", //元素圆点的大小
								"--dot-spacing": "10px", //圆点与圆点之前的距离
							},
						}}
						defaultIndex={0}>
						<Swiper.Item>
							<img src="../img/che1.png" alt="" />
						</Swiper.Item>
						<Swiper.Item>
							<img src="../img/che2.png" alt="" />
						</Swiper.Item>
						<Swiper.Item>
							<img src="../img/che3.png" alt="" />
						</Swiper.Item>
						<Swiper.Item>
							<img src="../img/che4.png" alt="" />
						</Swiper.Item>
						<Swiper.Item>
							<img src="../img/che5.png" alt="" />
						</Swiper.Item>
					</Swiper>
				</div>

				{/* 案例精选专区 */}
				<div className="dll_car_an" onClick={() => {
					navigate('/home/anli')
				}}>
					<img src="../img/anli.png" alt="" />
					<label>案例精选专区</label>
					<img src="../img/jian.png" className='dll_anli_jian' alt="" />
				</div>
				{/* 最速排行专区 */}
				<div className="dll_car_zui" onClick={() => {
					navigate('/home/zuisu')
				}}>
					<img src="../img/zuisu.png" alt="" />
					<label>最速排行专区</label>
					<img src="../img/jian.png" className='dll_anli_jian1' alt="" />
				</div>
				<div className='dll_car_fen'>
        <img src="../img/hei.png" alt="" />
        <span>.</span>   <label>改装车型热度排行榜</label>

				</div>
				<div>
					<div className="dll_car_pai1">
						<span>HONDA</span><br />
						<span>CiVic Type-R</span>
					</div>
					<div className="dll_car_pai2">
						<span>1</span>
					</div>
					<img className='dll_baicar' src="../img/pai1.png" alt="" />
				</div>
				<div className='dll_q'>
					<div className="dll_pai2_wen">
						<span>FORD</span><br />
						<span>Mustang</span>
					</div>
					<div className="dll_pai2">
						<span>2</span>
					</div>
					<img className='dll_pai2_img' src="../img/qian.png" alt="" />
				</div>
				<div className='dll_w'>
					<div className="dll_pai3_wen">
						<span>AUDI</span><br />
						<span>TTRS</span>
					</div>
					<div className="dll_pai3">
						<span>3</span>
					</div>
					<img className='dll_pai3_img' src="../img/juse.png" alt="" />
				</div>
				<div className='dll_picture'>
					<img className='dll_sort4' src="../img/sort4.png" alt="" />
					<img className='dll_sort5' src="../img/sort5.png" alt="" />
					<img className='dll_sort6' src="../img/sort6.png" alt="" />
					<img className='dll_sort7' src="../img/sort7.png" alt="" />
					<img className='dll_sort8' src="../img/sort8.png" alt="" />
					<img className='dll_sort9' src="../img/sort9.png" alt="" />
					<img className='dll_sort10' src="../img/sort10.png" alt="" />
				</div>
			</div>

			<Footer></Footer>
		</div>
	)
}
